<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>凯格行为验证码 - Python demo</title>
<!--
将以下域名替换成你的“应用服务器域名”
将以下 appid 替换成你的 AppID
服务器域名和appid在你的应用管理中获取
示例：<script src="https://cdn6.kgcaptcha.com/captcha.js?appid=XXX"></script>
-->
<script src="https://cdn9.kgcaptcha.com/captcha.js?appid=rA9qRcl6"></script>
<script>
kg.captcha({
    // 绑定显示区域
    bind: "#captchaBox",

    // 验证成功事务处理
    success: function (e) {
        console.log(e);
        // 将验证成功后的 token 通过隐藏域传递到后端
        kg.$("#kgCaptchaToken").value = e["token"];
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
// 检查表单提交
function check() {
    if (kg.$("#kgCaptchaToken").value == "") {
        alert("请完成图形验证后提交")
        return false;
    } else {
        return true;
    }
}
</script>
<style>
/* 应用形式选择 */
.nav_box {
    width: 100%;
    border-bottom: 1px solid #999;
    position: relative;
    padding: 0;
    margin-left: 15px;
    max-width: 332px;
}
.nav_box select {
    height: 38px;
    border-top: 2px solid #0f810a;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 0;
    width: 120px;
    padding: 0 10px;
    font-size: 14px;
    outline: none;
    margin: auto auto -1px 0;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url("") #FFF 90px center no-repeat;
}
.nav_box select::-ms-expand {
    display: none;
}

/* 表单 */
#form {
    margin: 0 15px 15px;
    max-width: 332px;
    text-align: center;
}
.mt30 {
    margin-top: 64px !important;
}
.inputForm {
    margin-bottom: 15px;
}
.inputForm input {
    width: 330px;
    height: 30px;
    border: 0;
    border-bottom: 1px solid #ddd;
    outline: none;
    margin: 8px 0;
}
.btn {
    cursor: pointer;
    display: block;
    width: 332px;
    height: 42px;
    line-height: 42px;
    color: #FFF;
    background: green;
    outline: none;
    border: 0;
    border-radius: 3px;
    margin: 15px auto;
    font-size: 16px;
}

#captchaBox {
    width: fit-content;
    margin: 0 auto;
}
#captchaButton {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    color: #666;
    background: #DDD;
    outline: none;
    border: 1px solid #999;
    border-radius: 3px;
    margin: 15px auto 0;
    width: 100%;
    display: block;
}
</style>
</head>
<body>
    <div class="nav_box">
        <select onchange="location.href=this.options[this.selectedIndex].value;">
            <option selected="selected"  value="demo-normal.php">嵌入式</option>
            <option value="demo-extend-top.php" >向上触发</option>
            <option value="demo-extend-down.php" >向下触发</option>
            <option value="demo-popup-a.php" >弹出式 A</option>
            <option value="demo-popup-b.php" >弹出式 B</option>
        </select>
     </div>
    <form action="http://localhost:8088/" method="post" id="form" onsubmit="return check();">

        <!-- 将验证成功后的 token 通过隐藏域传递到后端 -->
        <input type="hidden" name="kgCaptchaToken" id="kgCaptchaToken" value="" />

        <div class="inputForm">
            <input type="text" placeholder=" 例：登录帐号" />
            <br/>
            <input type="password" placeholder=" 例：登录密码" />
        </div>

        <!-- 绑定显示区域 -->
        <div id="captchaBox"></div>

        <input type="submit" value="提  交" class="btn" />
    </form>
</body>
</html>